// 封装分类数据业务相关代码
import { getTopCategoryAPI } from "@/apis/category";
import { onBeforeRouteUpdate } from "vue-router";
import { onMounted, ref } from "vue";
// vue3中获取路由参数的形式是固定的
import { useRoute } from "vue-router";
export function useCategory() {
  const categoryData = ref({});
  // 执行导入进来的  useRoute()  获得一个route实例，用来获取传过来的路由参数
  const route = useRoute();

  // id = route.params.id  给默认值，这样就可以实现和onBeforeRouteUpdate的联动了
  // 如果 onBeforeRouteUpdate 传递参数过来了，那么就用onBeforeRouteUpdate传递的参数，如果没有传递参数过来，那么就用默认的 route.params.id 的数据
  const getCategory = async (id = route.params.id) => {
    const res = await getTopCategoryAPI(id);
    categoryData.value = res.result;
  };

  // 初始化时，getCategory中使用的参数就是 route.params.id 中的值，因为此时并没有触发  onBeforeRouteUpdate （路由更新）
  onMounted(() => getCategory());

  // 目标：路由参数变化时，重新请求分类数据接口
  // 存在问题：重新请求分类数据接口，需要拿到最新的路由参数，但是  route.params.id   是滞后的（为什么滞后，是因为其必须在路由跳转之后才能获取到路由中传递的参数，而这里需要在路由跳转之前就拿到变化的参数并重新请求数据）,也就是无法取到最新的路由参数
  // 问题解决：参数to指的就是 目标路由对象；to中包含的有最新的参数；我们只需要在监听到路由更新的时候，重新获取需要更新的数据即可
  onBeforeRouteUpdate((to) => {
    getCategory(to.params.id);
  });

  // 函数内部需要把父组件使用到的数据以对象的形式return出去
  return {
    categoryData,
  };
}
